const menuItems = [
  "考勤日报",
  "考勤月报",
  "出勤记录",
  "排班管理",
  "假期余额",
  "休假记录",
  "假期类型",
  "加班记录",
  "班次设置",
  "考勤地点设置"
];

function Sidebar({ activeMenu, setActiveMenu, isMobile }) {
  if (isMobile) {
    return (
      <div style={{
        background: "#fff",
        borderRadius: "16px 16px 0 0",
        padding: "12px 16px",
        boxSizing: "border-box",
        marginBottom: 8
      }}>
        <div className="scroll-container" style={{
          overflowX: "auto",
          whiteSpace: "nowrap",
          margin: "0 -16px",
          padding: "0 16px"
        }}>
          <div style={{
            display: "flex",
            gap: 24
          }}>
            {menuItems.map(menu => (
              <div
                key={menu}
                onClick={() => setActiveMenu(menu)}
                style={{
                  cursor: "pointer",
                  color: activeMenu === menu ? "#1D2129" : "#86909C",
                  fontWeight: activeMenu === menu ? 600 : 400,
                  fontSize: 14,
                  position: "relative",
                  padding: "8px 0",
                  transition: "color 0.3s"
                }}
              >
                {menu}
                {activeMenu === menu && (
                  <div style={{
                    position: "absolute",
                    bottom: 0,
                    left: 0,
                    width: "100%",
                    height: 2,
                    background: "#165DFF",
                    borderRadius: 1
                  }} />
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div style={{
      width: 140,
      background: "#f5f7fa",
      // borderRadius: 12,
      // boxShadow: "0 2px 8px 0 #e4eaf3",
      minHeight: "100%",
      padding: "18px 0",
      boxSizing: "border-box",
    }}>
      <div style={{
        display: "flex",
        flexDirection: "column",
        gap: 4
      }}>
        {menuItems.map(menu => (
          <div
            key={menu}
            onClick={e => {
              setActiveMenu(menu);
              // 立即移除背景色，防止点击后残留
              e.currentTarget.style.background = "transparent";
            }}
            style={{
              padding: "0 0 0 28px",
              height: 36,
              margin: "5px 0",
              lineHeight: "36px",
              cursor: "pointer",
              background: "transparent",
              color: activeMenu === menu ? "#203A64" : "#9192ba",
              fontWeight: activeMenu === menu ? 600 : 400,
              transition: "all 0.3s"
            }}
            onMouseEnter={e => {
              if (activeMenu !== menu) e.currentTarget.style.background = "#e5e7eb";
            }}
            onMouseLeave={e => {
              e.currentTarget.style.background = "transparent";
            }}
          >
            {menu}
          </div>
        ))}
      </div>
    </div>
  );
}

export default Sidebar; 